<template>
    <div class="platform-page">
        <!-- 标题区域 -->
        <!-- <div class="title-section">
            <h1 class="page-title">陪练订单</h1>
            <p class="en-title">ORDER</p>
        </div> -->

        <!-- 游戏列表 -->
        <div class="game-title">热门游戏</div>
        <div class="game-list">
            <div :class="currentGame == game.name ? 'game-item active' : 'game-item'" v-for="(game, index) in games"
                :key="index" @click="selectCurrentGame(game.name)">
                <img :src="game.icon" :alt="game.name" class="game-icon">
                <span class="game-name">{{ game.name }}</span>
            </div>
        </div>
        <div class="order-amin">
            <div class="order-title" v-if="currentGame != '三角洲行动'">陪练服务</div>
            <WZPL v-if="currentGame == '王者荣耀'"></WZPL>
            <YXLMPL v-if="currentGame == '英雄联盟'"></YXLMPL>
            <WWQYPL v-if="currentGame == '无畏契约'"></WWQYPL>
            <SJZPL v-if="currentGame == '三角洲行动'"></SJZPL>
        </div>

    </div>
</template>

<script>
// import { ref, onMounted } from 'vue'; // Removed Vue 3 imports
import WZPL from '../../components/PL/WZPL.vue';
import YXLMPL from '../../components/PL/YXLMPL.vue';
import WWQYPL from '../../components/PL/WWQYPL.vue';
import SJZPL from '../../components/PL/SJZPL.vue';
//导入游戏图标
import WZRYicon from '../../assets/images/WZRY.jpg';
import YXLMicon from '../../assets/images/YXLM.jpg';
import WWQYicon from '../../assets/images/WWQY.jpg';
import SJZYicon from '../../assets/images/SJZ.jpg';
import GDYXicon from '../../assets/images/GDYX.jpg';

export default {
  name: 'PLorder',
  components: {
    WZPL,
    YXLMPL,
    WWQYPL,
    SJZPL
  },
  props: {
    currentGame: {
        type: String,
        default: '王者荣耀'
    }
  },
  data() {
    return {
      games: [
        { name: '王者荣耀', icon: WZRYicon },
        { name: '英雄联盟', icon: YXLMicon },
        { name: '无畏契约', icon: WWQYicon },
        { name: '三角洲行动', icon: SJZYicon },
        { name: '更多游戏', icon: GDYXicon },
      ]
    }
  },
  methods: {
    selectCurrentGame(game) {
        this.$emit('update:currentGame', game); // Use this.$emit in Vue 2
    }
  },
  mounted() {
    // Logic from onMounted (if any) would go here
  }
}

// // 游戏数据
// const props = defineProps({
//     currentGame: {
//         type: String,
//         default: '王者荣耀'
//     }
// })
// // 定义 emits
// const emit = defineEmits(['update:currentGame']);
// const games = ref([
//     { name: '王者荣耀', icon: WZRYicon },
//     { name: '英雄联盟', icon: YXLMicon },
//     { name: '无畏契约', icon: WWQYicon },
//     { name: '三角洲行动', icon: SJZYicon },
//     { name: '更多游戏', icon: GDYXicon },
// ]);
// const selectCurrentGame = (game) => {
//     emit('update:currentGame', game);
// }

</script>

<style scoped>
/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

body {
    /* background-color: #f5f5f5; */
}

/* 平台页面容器 */
.platform-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* background-color: #f5f5f5; */
    position: relative;
}



/* 主内容区域样式 */

.title-section {
    text-align: center;
    margin-bottom: 40px;
}

.page-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.en-title {
    font-size: 16px;
    color: #777;
    margin: 5px 0 0 0;
    letter-spacing: 3px;
}

/* 游戏列表样式 */
.game-title {
    width: 100%;
    height: 60px;
    font-size: 20px;
    font-weight: 700;
    padding: 24px 32px;
    background-color: #fff;
}

.game-list {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 40px;
    padding: 24px 32px;
    background-color: #fff;
}

.game-item {
    width: 13%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 12px;
    padding: 23px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.game-item:hover {
    cursor: pointer;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.active {
    border: 3px solid #398bff;
}

.game-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: contain;
    margin-bottom: 10px;
}

.game-item img {
    width: 120px;
    height: 120px;
}

.game-name {
    font-size: 20px;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-amin {
    width: 100%;
    /* padding:24px 32px; */
    box-sizing: border-box;
    /* background: #fff; */
}

.order-amin .order-title {
    width: 100%;
    height: 60px;
    font-size: 20px;
    font-weight: 700;
    padding: 24px 32px;
    background-color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {

    .page-title {
        font-size: 28px;
    }

    .game-list {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 15px;
    }

    .game-icon {
        width: 50px;
        height: 50px;
    }
}
</style>